import ProTable from '@ant-design/pro-table';
import { Switch} from "antd";
import {PageContainer} from "@ant-design/pro-layout";
import {ModalForm, ProFormRadio, ProFormText} from "@ant-design/pro-form";
import {Role} from "@/services/ant-design-pro/management";
import {useEffect, useState} from "react";
const columns =
 [
   {
     title: 'ID',
     dataIndex: 'id',
     align: "center",
     search:false,
     width: 48,
   },
   {
     title: '身份名称',
     dataIndex: 'cn_name',
     align: "center",
   },
   {
     title: '权限',
     dataIndex: 'guard_name',
     align: "center",
     onFilter: true,
     valueType: 'select',
     valueEnum: {
       closed: {
         text: '显示',
         status: 'Success',
       },
       processing: {
         text: '不显示',
         status: 'Processing',
       },
     },
   },
   {
     title: '状态',
     align: "center",
     dataIndex: 'labels',
     search: false,
     render: () => (
       <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
     )

   },
   {
     title: '操作',
     align: "center",
     valueType: 'option',
     render: () => [
       <a>
         <ModalForm<{
           name: string;
           company: string;
         }>
           title="身份管理"
           trigger={<a>编辑</a>}
           modalProps={ {
             onCancel: () => console.log('run'),
           } }
         >
           <ProFormText
             name="text"
             label="身份名称："
             placeholder="请输入身份名称"
           />
           <ProFormRadio.Group
             name="Radio"
             label="是否开启:"
             options={[
               {
                 label: '开启',
                 value: 'a',
               },
               {
                 label: '关闭',
                 value: 'b',
               },
             ]}
           />
           <div>权限：
             暂无数据
           </div>
         </ModalForm>
       </a>,
       <a>
         <ModalForm<{
           name: string;
           company: string;
         }>
           width='350px'
           title="删除"
           trigger={<a>删除</a>}
           modalProps={ {
             onCancel: () => console.log('run'),
           } }
         >
           <div>确定要删除吗？删除后将无法恢复，请谨慎操作！</div>
         </ModalForm>
       </a>,
     ],
   },
 ];
export default () => {
  const [dataAll, setData] = useState([]);
  useEffect(() => {
    Role().then(res => {
      console.log(res.data);
      setData(res.data);
    })
  }, [])
  return (
    <PageContainer
      header={ {
        title: '身份管理',
        breadcrumb: {},
      }}
    >
      <ProTable
        columns={columns}
        editable={ {
          type: 'multiple',
        }}
        dataSource={dataAll}
        rowKey="id"
        search={ {
          labelWidth: 'auto',
        }}
        pagination={ {
          pageSize: 5,
        }}
        dateFormatter="string"
      />
    </PageContainer>
  );
};
